<!DOCTYPE html><html class="theme-next gemini use-motion" lang="zh-Hans"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta name="theme-color" content="#222"><script src="/MyBlog/lib/pace/pace.min.js?v=1.0.2"></script><link href="/MyBlog/lib/pace/pace-theme-loading-bar.min.css?v=1.0.2" rel="stylesheet"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><link href="/MyBlog/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css"><link href="/MyBlog/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css"><link href="/MyBlog/css/main.css?v=5.1.4" rel="stylesheet" type="text/css"><link rel="apple-touch-icon" sizes="180x180" href="/MyBlog/images/apple-touch-icon-next.png?v=5.1.4"><link rel="icon" type="image/png" sizes="32x32" href="/MyBlog/images/bitbug_favicon.ico?v=5.1.4"><link rel="icon" type="image/png" sizes="16x16" href="/MyBlog/images/bitbug_favicon16.ico?v=5.1.4"><link rel="mask-icon" href="/MyBlog/images/logo.svg?v=5.1.4" color="#222"><meta name="keywords" content="Webpack,"><meta name="description" content="什么是Webpack来看看官方的解释：&amp;emsp;&amp;emsp;At its core, webpack is a static module bundler for modern JavaScript applications.&amp;emsp;&amp;emsp;从本质上来讲，webpack是一个现代的JavgScript应用的静态模块打包工具。&amp;emsp;&amp;emsp;他把所有资源打包压缩成浏览器认识的语法，"><meta property="og:type" content="article"><meta property="og:title" content="Webpack（一） 基本使用和loader"><meta property="og:url" content="https://gitee.com/yang_yu_xiang/MyBlog/2020/07/30/Webpack%EF%BC%88%E4%B8%80%EF%BC%89/index.html"><meta property="og:site_name" content="Yang&#39;s Blog"><meta property="og:description" content="什么是Webpack来看看官方的解释：&amp;emsp;&amp;emsp;At its core, webpack is a static module bundler for modern JavaScript applications.&amp;emsp;&amp;emsp;从本质上来讲，webpack是一个现代的JavgScript应用的静态模块打包工具。&amp;emsp;&amp;emsp;他把所有资源打包压缩成浏览器认识的语法，"><meta property="og:image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/webpack.png"><meta property="article:published_time" content="2020-07-30T05:43:28.000Z"><meta property="article:modified_time" content="2020-10-27T15:20:06.565Z"><meta property="article:author" content="杨雨翔"><meta property="article:tag" content="Webpack"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/webpack.png"><script type="text/javascript" id="hexo.configurations">var NexT=window.NexT||{},CONFIG={root:"/MyBlog/",scheme:"Gemini",version:"5.1.4",sidebar:{position:"left",display:"post",offset:12,b2t:!1,scrollpercent:!0,onmobile:!0},fancybox:!0,tabs:!0,motion:{enable:!0,async:!1,transition:{post_block:"fadeIn",post_header:"slideDownIn",post_body:"slideDownIn",coll_header:"slideLeftIn",sidebar:"slideUpIn"}},duoshuo:{userId:"0",author:"博主"},algolia:{applicationID:"",apiKey:"",indexName:"",hits:{per_page:10},labels:{input_placeholder:"Search for Posts",hits_empty:"We didn't find any results for the search: ${query}",hits_stats:"${hits} results found in ${time} ms"}}}</script><link rel="canonical" href="https://gitee.com/yang_yu_xiang/MyBlog/2020/07/30/Webpack（一）/"><title>Webpack（一） 基本使用和loader | Yang's Blog</title><meta name="generator" content="Hexo 4.2.1"></head><body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans"><div class="container sidebar-position-left page-post-detail"><div class="headband"></div><a href="https://gitee.com/yang_yu_xiang" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513;color:#fff;position:absolute;top:0;border:0;right:0" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style><header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="header-inner"><div class="site-brand-wrapper"><div class="site-meta"><div class="custom-logo-site-title"><a href="/MyBlog/" class="brand" rel="start"><span class="logo-line-before"><i></i></span> <span class="site-title">Yang's Blog</span> <span class="logo-line-after"><i></i></span></a></div><p class="site-subtitle">永远年轻 永远热泪盈眶</p></div><div class="site-nav-toggle"><button><span class="btn-bar"></span> <span class="btn-bar"></span> <span class="btn-bar"></span></button></div></div><nav class="site-nav"><ul id="menu" class="menu"><li class="menu-item menu-item-home"><a href="/MyBlog/" rel="section"><i class="menu-item-icon fa fa-fw fa-home"></i><br>首页</a></li><li class="menu-item menu-item-tags"><a href="/MyBlog/tags/" rel="section"><i class="menu-item-icon fa fa-fw fa-tags"></i><br>标签</a></li><li class="menu-item menu-item-categories"><a href="/MyBlog/categories/" rel="section"><i class="menu-item-icon fa fa-fw fa-th"></i><br>分类</a></li><li class="menu-item menu-item-archives"><a href="/MyBlog/archives/" rel="section"><i class="menu-item-icon fa fa-fw fa-archive"></i><br>归档</a></li><li class="menu-item menu-item-search"><a href="javascript:;" class="popup-trigger"><i class="menu-item-icon fa fa-search fa-fw"></i><br>搜索</a></li></ul><div class="site-search"><div class="popup search-popup local-search-popup"><div class="local-search-header clearfix"><span class="search-icon"><i class="fa fa-search"></i> </span><span class="popup-btn-close"><i class="fa fa-times-circle"></i></span><div class="local-search-input-wrapper"><input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input"></div></div><div id="local-search-result"></div></div></div></nav></div></header><main id="main" class="main"><div class="main-inner"><div class="content-wrap"><div id="content" class="content"><div id="posts" class="posts-expand"><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/07/30/Webpack%EF%BC%88%E4%B8%80%EF%BC%89/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline">Webpack（一） 基本使用和loader</h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-07-30T13:43:28+08:00">2020-07-30 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-10-27T23:20:06+08:00">2020-10-27 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span> </a></span>， <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/%E5%89%8D%E7%AB%AF/Webpack/" itemprop="url" rel="index"><span itemprop="name">Webpack</span> </a></span></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/07/30/Webpack%EF%BC%88%E4%B8%80%EF%BC%89/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/07/30/Webpack%EF%BC%88%E4%B8%80%EF%BC%89/" itemprop="commentCount"></span> </a></span><span class="post-meta-divider">|</span> <span class="page-pv">本文总阅读数 <i class="fa fa-file-o"></i> <span class="busuanzi-value" id="busuanzi_value_page_pv"></span>次</span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">3.6k </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">14</span></div></div></header><div class="post-body" itemprop="articleBody"><h1 id="什么是Webpack"><a href="#什么是Webpack" class="headerlink" title="什么是Webpack"></a>什么是Webpack</h1><p>来看看官方的解释：</p><p>&emsp;&emsp;At its core, webpack is a static module bundler for modern JavaScript applications.</p><p>&emsp;&emsp;从本质上来讲，webpack是一个现代的JavgScript应用的静态<strong>模块打包</strong>工具。</p><p><img src="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/webpack.png" alt=""></p><p>&emsp;&emsp;他把所有资源打包压缩成浏览器认识的语法，从而更好的放在服务器上部署，按我的理解就是：大概webpack类似于一个翻译软件，但是它内部是用google翻译（即node）进行翻译的。<br>翻译是为了让我们写的代码能被计算机所识别。</p><a id="more"></a><h1 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h1><p><strong>！Webpack为了可以正常运行，必须依赖node环境</strong></p><h2 id="全局安装"><a href="#全局安装" class="headerlink" title="全局安装"></a>全局安装</h2><blockquote><p>npm install webpack webpack-cli -g</p></blockquote><p>指定版本：</p><blockquote><p>npm install <a href="mailto:webpack@4.42.0">webpack@4.42.0</a> -g</p></blockquote><h2 id="局部安装"><a href="#局部安装" class="headerlink" title="局部安装"></a>局部安装</h2><p>–save-dev是开发时依赖，项目打包后不需要继续使用的。</p><blockquote><p>npm install webpack –save-dev</p></blockquote><h1 id="Webpack的配置详情"><a href="#Webpack的配置详情" class="headerlink" title="Webpack的配置详情"></a>Webpack的配置详情</h1><h2 id="entry"><a href="#entry" class="headerlink" title="entry"></a>entry</h2><p>entry: 入口起点</p><p>1、string –&gt; ‘./src/index.js’，单入口<br>打包形成一个 chunk。 输出一个 bundle 文件。此时 chunk 的名称默认是 main</p><p>2、array –&gt; [‘./src/index.js’, ‘./src/add.js’]，多入口<br>所有入口文件最终只会形成一个 chunk，输出出去只有一个 bundle 文件。<br>（一般只用在 HMR 功能中让 html 热更新生效）</p><p>3、object，多入口<br>有几个入口文件就形成几个 chunk，输出几个 bundle 文件，此时 chunk 的名称是 key 值</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">--&gt; 特殊用法：</span><br><span class="line"></span><br><span class="line">entry: &#123;</span><br><span class="line">  <span class="comment">// 最终只会形成一个chunk, 输出出去只有一个bundle文件。</span></span><br><span class="line">  index: [<span class="string">'./src/index.js'</span>, <span class="string">'./src/count.js'</span>], </span><br><span class="line">  <span class="comment">// 形成一个chunk，输出一个bundle文件。</span></span><br><span class="line">  add: <span class="string">'./src/add.js'</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="output"><a href="#output" class="headerlink" title="output"></a>output</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">output: &#123;</span><br><span class="line">  <span class="comment">// 文件名称（指定名称+目录）</span></span><br><span class="line">  filename: <span class="string">'js/[name].js'</span>,</span><br><span class="line">  <span class="comment">// 输出文件目录（将来所有资源输出的公共目录）</span></span><br><span class="line">  path: resolve(__dirname, <span class="string">'build'</span>),</span><br><span class="line">  <span class="comment">// 所有资源引入公共路径前缀 --&gt; 'imgs/a.jpg' --&gt; '/imgs/a.jpg'</span></span><br><span class="line">  publicPath: <span class="string">'/'</span>,</span><br><span class="line">  chunkFilename: <span class="string">'js/[name]_chunk.js'</span>, <span class="comment">// 指定非入口chunk的名称</span></span><br><span class="line">  library: <span class="string">'[name]'</span>, <span class="comment">// 打包整个库后向外暴露的变量名</span></span><br><span class="line">  libraryTarget: <span class="string">'window'</span> <span class="comment">// 变量名添加到哪个上 browser：window</span></span><br><span class="line">  <span class="comment">// libraryTarget: 'global' // node：global</span></span><br><span class="line">  <span class="comment">// libraryTarget: 'commonjs' // conmmonjs模块 exports</span></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><h2 id="module"><a href="#module" class="headerlink" title="module"></a>module</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>: &#123;</span><br><span class="line">  rules: [</span><br><span class="line">    <span class="comment">// loader的配置</span></span><br><span class="line">    &#123;</span><br><span class="line">      test: <span class="regexp">/\.css$/</span>,</span><br><span class="line">      <span class="comment">// 多个loader用use</span></span><br><span class="line">      use: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>]</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">      test: <span class="regexp">/\.js$/</span>,</span><br><span class="line">      <span class="comment">// 排除node_modules下的js文件</span></span><br><span class="line">      exclude: <span class="regexp">/node_modules/</span>,</span><br><span class="line">      <span class="comment">// 只检查src下的js文件</span></span><br><span class="line">      include: resolve(__dirname, <span class="string">'src'</span>),</span><br><span class="line">      enforce: <span class="string">'pre'</span>, <span class="comment">// 优先执行</span></span><br><span class="line">      <span class="comment">// enforce: 'post', // 延后执行</span></span><br><span class="line">      <span class="comment">// 单个loader用loader</span></span><br><span class="line">      loader: <span class="string">'eslint-loader'</span>,</span><br><span class="line">      options: &#123;&#125; <span class="comment">// 指定配置选项</span></span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="comment">// 以下配置只会生效一个</span></span><br><span class="line">      oneOf: []</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><h2 id="resolve"><a href="#resolve" class="headerlink" title="resolve"></a>resolve</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 解析模块的规则</span></span><br><span class="line">resolve: &#123;</span><br><span class="line">  <span class="comment">// 配置解析模块路径别名: 优点：当目录层级很复杂时，简写路径；缺点：路径不会提示</span></span><br><span class="line">  alias: &#123;</span><br><span class="line">    $css: resolve(__dirname, <span class="string">'src/css'</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 配置省略文件路径的后缀名（引入时就可以不写文件后缀名了）</span></span><br><span class="line">  extensions: [<span class="string">'.js'</span>, <span class="string">'.json'</span>, <span class="string">'.jsx'</span>, <span class="string">'.css'</span>],</span><br><span class="line">  <span class="comment">// 告诉 webpack 解析模块应该去找哪个目录</span></span><br><span class="line">  modules: [resolve(__dirname, <span class="string">'../../node_modules'</span>), <span class="string">'node_modules'</span>]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>这样配置后，引入文件就可以这样简写：import ‘$css/index’;</p><h2 id="devserver"><a href="#devserver" class="headerlink" title="devserver"></a>devserver</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">devServer: &#123;</span><br><span class="line">  <span class="comment">// 运行代码所在的目录</span></span><br><span class="line">  contentBase: resolve(__dirname, <span class="string">'build'</span>),</span><br><span class="line">  <span class="comment">// 监视contentBase目录下的所有文件，一旦文件变化就会reload</span></span><br><span class="line">  watchContentBase: <span class="literal">true</span>,</span><br><span class="line">  watchOptions: &#123;</span><br><span class="line">    <span class="comment">// 忽略文件</span></span><br><span class="line">    ignored: <span class="regexp">/node_modules/</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 启动gzip压缩</span></span><br><span class="line">  compress: <span class="literal">true</span>,</span><br><span class="line">  <span class="comment">// 端口号</span></span><br><span class="line">  port: <span class="number">5000</span>,</span><br><span class="line">  <span class="comment">// 域名</span></span><br><span class="line">  host: <span class="string">'localhost'</span>,</span><br><span class="line">  <span class="comment">// 自动打开浏览器</span></span><br><span class="line">  open: <span class="literal">true</span>,</span><br><span class="line">  <span class="comment">// 开启HMR功能</span></span><br><span class="line">  hot: <span class="literal">true</span>,</span><br><span class="line">  <span class="comment">// 不要显示启动服务器日志信息</span></span><br><span class="line">  clientLogLevel: <span class="string">'none'</span>,</span><br><span class="line">  <span class="comment">// 除了一些基本信息外，其他内容都不要显示</span></span><br><span class="line">  quiet: <span class="literal">true</span>,</span><br><span class="line">  <span class="comment">// 如果出错了，不要全屏提示</span></span><br><span class="line">  overlay: <span class="literal">false</span>,</span><br><span class="line">  <span class="comment">// 服务器代理，--&gt; 解决开发环境跨域问题</span></span><br><span class="line">  proxy: &#123;</span><br><span class="line">    <span class="comment">// 一旦devServer(5000)服务器接收到/api/xxx的请求，就会把请求转发到另外一个服务器3000</span></span><br><span class="line">    <span class="string">'/api'</span>: &#123;</span><br><span class="line">      target: <span class="string">'http://localhost:3000'</span>,</span><br><span class="line">      <span class="comment">// 发送请求时，请求路径重写：将/api/xxx --&gt; /xxx （去掉/api）</span></span><br><span class="line">      pathRewrite: &#123;</span><br><span class="line">        <span class="string">'^/api'</span>: <span class="string">''</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="optimization"><a href="#optimization" class="headerlink" title="optimization"></a>optimization</h2><p>contenthash 缓存会导致一个问题：修改 a 文件导致 b 文件 contenthash 变化。<br>因为在 index.js 中引入 a.js，打包后 index.js 中记录了 a.js 的 hash 值，而 a.js 改变，其重新打包后的 hash 改变，导致 index.js 文件内容中记录的 a.js 的 hash 也改变，从而重新打包后 index.js 的 hash 值也会变，这样就会使缓存失效。（改变的是a.js文件但是 index.js 文件的 hash 值也改变了）<br>解决办法：runtimeChunk –&gt; 将当前模块记录其他模块的 hash 单独打包为一个文件 runtime，这样 a.js 的 hash 改变只会影响 runtime 文件，不会影响到 index.js 文件</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line">output: &#123;</span><br><span class="line">  filename: <span class="string">'js/[name].[contenthash:10].js'</span>,</span><br><span class="line">  path: resolve(__dirname, <span class="string">'build'</span>),</span><br><span class="line">  chunkFilename: <span class="string">'js/[name].[contenthash:10]_chunk.js'</span> <span class="comment">// 指定非入口文件的其他chunk的名字加_chunk</span></span><br><span class="line">&#125;,</span><br><span class="line">optimization: &#123;</span><br><span class="line">  splitChunks: &#123;</span><br><span class="line">    chunks: <span class="string">'all'</span>,</span><br><span class="line">    <span class="comment">/* 以下都是splitChunks默认配置，可以不写</span></span><br><span class="line"><span class="comment">    miniSize: 30 * 1024, // 分割的chunk最小为30kb（大于30kb的才分割）</span></span><br><span class="line"><span class="comment">    maxSize: 0, // 最大没有限制</span></span><br><span class="line"><span class="comment">    minChunks: 1, // 要提取的chunk最少被引用1次</span></span><br><span class="line"><span class="comment">    maxAsyncRequests: 5, // 按需加载时并行加载的文件的最大数量为5</span></span><br><span class="line"><span class="comment">    maxInitialRequests: 3, // 入口js文件最大并行请求数量</span></span><br><span class="line"><span class="comment">    automaticNameDelimiter: '~', // 名称连接符</span></span><br><span class="line"><span class="comment">    name: true, // 可以使用命名规则</span></span><br><span class="line"><span class="comment">    cacheGroups: &#123; // 分割chunk的组</span></span><br><span class="line"><span class="comment">      vendors: &#123;</span></span><br><span class="line"><span class="comment">        // node_modules中的文件会被打包到vendors组的chunk中，--&gt; vendors~xxx.js</span></span><br><span class="line"><span class="comment">        // 满足上面的公共规则，大小超过30kb、至少被引用一次</span></span><br><span class="line"><span class="comment">        test: /[\\/]node_modules[\\/]/,</span></span><br><span class="line"><span class="comment">        // 优先级</span></span><br><span class="line"><span class="comment">        priority: -10</span></span><br><span class="line"><span class="comment">      &#125;,</span></span><br><span class="line"><span class="comment">      default: &#123;</span></span><br><span class="line"><span class="comment">        // 要提取的chunk最少被引用2次</span></span><br><span class="line"><span class="comment">        minChunks: 2,</span></span><br><span class="line"><span class="comment">        prority: -20,</span></span><br><span class="line"><span class="comment">        // 如果当前要打包的模块和之前已经被提取的模块是同一个，就会复用，而不是重新打包</span></span><br><span class="line"><span class="comment">        reuseExistingChunk: true</span></span><br><span class="line"><span class="comment">      &#125;</span></span><br><span class="line"><span class="comment">    &#125; */</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 将index.js记录的a.js的hash值单独打包到runtime文件中</span></span><br><span class="line">  runtimeChunk: &#123;</span><br><span class="line">    name: <span class="function"><span class="params">entrypoint</span> =&gt;</span> <span class="string">`runtime-<span class="subst">$&#123;entrypoint.name&#125;</span>`</span></span><br><span class="line">  &#125;,</span><br><span class="line">  minimizer: [</span><br><span class="line">    <span class="comment">// 配置生产环境的压缩方案：js/css</span></span><br><span class="line">    <span class="keyword">new</span> TerserWebpackPlugin(&#123;</span><br><span class="line">      <span class="comment">// 开启缓存</span></span><br><span class="line">      cache: <span class="literal">true</span>,</span><br><span class="line">      <span class="comment">// 开启多进程打包</span></span><br><span class="line">      parallel: <span class="literal">true</span>,</span><br><span class="line">      <span class="comment">// 启用sourceMap(否则会被压缩掉)</span></span><br><span class="line">      sourceMap: <span class="literal">true</span></span><br><span class="line">    &#125;)</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h1 id="Webpack的使用"><a href="#Webpack的使用" class="headerlink" title="Webpack的使用"></a>Webpack的使用</h1><p>&emsp;&emsp;在HTML文件中引入main.js部署到服务器上时，浏览器无法解析commonjs的module.exports，这个时候我们需要通过webpack打包<br><strong>开发环境：</strong></p><blockquote><p>webpack ./src/main.js -o ./build/bundle.js –mode=development<br><strong>生产环境：</strong>(会压缩代码)</p></blockquote><blockquote><p>webpack ./src/main.js -o ./build/bundle.js –mode=production</p></blockquote><p>&emsp;&emsp;这时，我们在index.html中引入<code>./build/bundle.js</code> 就可以访问到这两个方法并使用了</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./dist/bundle.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure><h1 id="Webpack的配置"><a href="#Webpack的配置" class="headerlink" title="Webpack的配置"></a>Webpack的配置</h1><p>&emsp;&emsp;为了更方便的使用webpack，我们可以定义一个<code>webpack.config.js</code>文件来管理我们需要的命令</p><p>&emsp;&emsp;在任何项目中，当需要运用到node环境时，我们都需要执行下面的命令来初始化node的配置</p><blockquote><p>npm init || npm init -y<br>就会生成 <code>package.json</code>这个文件，这个文件主要描述了当前项目里的一些信息</p></blockquote><p>然后，我们就可以在<code>webpack.config.js</code>中配置打包文件的入口和出口和其他基本配置</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//引入path模块，使用__dirname来拼接绝对路径</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>)</span><br><span class="line"><span class="built_in">module</span>.exports =&#123;</span><br><span class="line">    <span class="comment">//入口文件  即需要打包的文件</span></span><br><span class="line">    entry:<span class="string">'./src/main.js'</span>,</span><br><span class="line">    <span class="comment">//出口文件 即打包好的文件路径和文件名</span></span><br><span class="line">    output: &#123;</span><br><span class="line">        path:path.resolve(__dirname,<span class="string">'dist'</span>),</span><br><span class="line">        filename:<span class="string">'bundle.js'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="built_in">module</span>: &#123;</span><br><span class="line">        rules: [</span><br><span class="line">            &#123;  </span><br><span class="line">                test: <span class="regexp">/\.css$/</span>,</span><br><span class="line">                use: [<span class="string">'style-loader'</span>,<span class="string">'css-loader'</span>] </span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">//plugin都需要commonjs导入</span></span><br><span class="line">    plugins:[</span><br><span class="line">        <span class="keyword">new</span> webpack.BannerPlugin(<span class="string">'最终版权归yang所有'</span>)，</span><br><span class="line">        <span class="keyword">new</span> htmlwebpackPlugin(&#123;</span><br><span class="line">            template: <span class="string">'index.html'</span></span><br><span class="line">        &#125;),</span><br><span class="line">    ],</span><br><span class="line">    mode:<span class="string">'development'</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h1 id="package-json中自定义启动"><a href="#package-json中自定义启动" class="headerlink" title="package.json中自定义启动"></a>package.json中自定义启动</h1><p>来看一个package.json 配置</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="attr">"name"</span>:<span class="string">"meetwebpack"</span>,</span><br><span class="line">    <span class="attr">"version"</span>:<span class="string">"1.0.0"</span>,</span><br><span class="line">    <span class="attr">"description"</span>:<span class="string">""</span>,</span><br><span class="line">    <span class="attr">"main"</span>:<span class="string">"index.js"</span>,</span><br><span class="line">    <span class="attr">"scripts"</span>: &#123;</span><br><span class="line">    <span class="attr">"build"</span>:<span class="string">"webpack"</span></span><br><span class="line">&#125;,</span><br><span class="line">    <span class="attr">"author"</span>:<span class="string">""</span>,</span><br><span class="line">    <span class="attr">"license"</span>:<span class="string">"ISC"</span>,</span><br><span class="line">    <span class="attr">"devDependencies"</span>: &#123;</span><br><span class="line">        <span class="attr">"webpack"</span>:<span class="string">"^3.6.0"</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>&emsp;&emsp;每次执行都敲这么一长串webpack命令很不方便。OK，我们可以在package.json的scripts中定义自己的执行脚本。</p><p>&emsp;&emsp;package.json中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置。</p><ul><li><p>首先，会寻找本地的node_modules/.bin路径中对应的命令。</p></li><li><p>如果没有找到，会去全局的环境变量中寻找。</p></li><li><p>如何执行我们的build指令呢?</p><blockquote><p>npm run build</p></blockquote></li></ul><h1 id="loader"><a href="#loader" class="headerlink" title="loader"></a>loader</h1><p>&emsp;&emsp;<code>loader</code>是webpack中一个非常核心的概念。</p><p>&emsp;&emsp;在我们上面的实例中，我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。</p><p>&emsp;&emsp;但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。</p><p>&emsp;&emsp;对于webpack本身的能力来说，对于这些转化是不支持的。那怎么办呢?给webpack扩展对应的loader就可以啦。</p><p>loader使用过程∶</p><ul><li>步骤一︰通过npm安装需要使用的loader</li><li>步骤二︰在webpack.config.js中的modules关键字下进行配置</li></ul><p>大部分loader我们都可以在<strong>webpack的官网</strong>中找到，并且学习对应的用法。</p><h2 id="webpack中使用css文件的配置"><a href="#webpack中使用css文件的配置" class="headerlink" title="webpack中使用css文件的配置"></a>webpack中使用css文件的配置</h2><p>&emsp;&emsp;我们想把所有的js/css文件都打包在bundle.js中，我们就需要在入口文件中添加相关的依赖。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//main.js中添加</span></span><br><span class="line"><span class="built_in">require</span>(<span class="string">'./css/index.css'</span>)</span><br></pre></td></tr></table></figure><p>安装css-loader: 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码</p><blockquote><p>npm install –save-dev css-loader</p></blockquote><p>安装style-loader: 将模块的导出作为样式添加到 DOM 中</p><blockquote><p>npm install –save-dev style-loader</p></blockquote><p>在<code>webpack.config.json</code> 的<code>module.exports</code>中添加如下配置</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//引入path模块，使用__dirname来拼接绝对路径</span></span><br><span class="line"><span class="keyword">const</span> path = reguire(<span class="string">'path'</span>)</span><br><span class="line"><span class="built_in">module</span>.exports =&#123;</span><br><span class="line">    entry:<span class="string">'./src/main.js'</span>,</span><br><span class="line">    output: &#123;</span><br><span class="line">        path:path.resolve(__dirname,<span class="string">'dist'</span>),</span><br><span class="line">        filename:<span class="string">'bundle.js'</span></span><br><span class="line">    &#125;,  </span><br><span class="line">    <span class="built_in">module</span>: &#123;</span><br><span class="line">        rules: [</span><br><span class="line">            <span class="comment">//css-loader只负责将css文件进行加裁</span></span><br><span class="line">            &#123;   <span class="comment">//匹配所有的css文件</span></span><br><span class="line">                test: <span class="regexp">/\.css$/</span>,</span><br><span class="line">                <span class="comment">//css-loader只负责将css文件进行加载  style-loader将样式添加到 DOM 中</span></span><br><span class="line">                <span class="comment">//使用多个loader时，是从右向左，所以先加载css文件，css-loader写在右边</span></span><br><span class="line">                use: [<span class="string">'style-loader'</span>,<span class="string">'css-loader'</span>] </span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>&emsp;&emsp;如果在<code>package.json</code>中定义了<code>build</code>，那么现在就可以运行 <code>npm run build</code>进行打包了</p><h2 id="webpack中使用less文件的配置"><a href="#webpack中使用less文件的配置" class="headerlink" title="webpack中使用less文件的配置"></a>webpack中使用less文件的配置</h2><p>&emsp;&emsp;如果我们希望在项目中使Less、scss来写样式，webpack是否可以帮助我们处理呢?</p><p>&emsp;&emsp;我们这里以less为例，其他也是一样的。</p><p>我们还是先创建一个less文件index.less，依然放在css文件夹中</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* index.less */</span></span><br><span class="line">@fontsize:50px;</span><br><span class="line">@fontColor:orange;</span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>:@fontsize;</span><br><span class="line">    <span class="attribute">color</span>: @fontcolor;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>然后在入口文件main.js中添加依赖</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//main.js中添加</span></span><br><span class="line"><span class="built_in">require</span>(<span class="string">'./css/index.less'</span>)</span><br></pre></td></tr></table></figure><p>安装less-roader</p><blockquote><p>npm install less-loader –save-dev</p></blockquote><p>在<code>webpack.config.js</code>的<code>module</code>的<code>rules</code>中添加：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">rules: [</span><br><span class="line">    &#123;</span><br><span class="line">        test: <span class="regexp">/\.css$/</span>,</span><br><span class="line">        <span class="comment">//多个loader需要用use</span></span><br><span class="line">        use: [<span class="string">'style-loader'</span>,<span class="string">'css-loader'</span>] </span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">        test: <span class="regexp">/\.less$/</span>,</span><br><span class="line">         use: [<span class="string">'style-loader'</span>,<span class="string">'css-loader'</span>,<span class="string">'less-loader'</span>] </span><br><span class="line">    &#125;,</span><br><span class="line">]</span><br></pre></td></tr></table></figure><h2 id="图片文件的处理"><a href="#图片文件的处理" class="headerlink" title="图片文件的处理"></a>图片文件的处理</h2><p>我们在index.css中引入一张图片</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span>&#123;</span><br><span class="line">    <span class="attribute">background</span>:<span class="built_in">url</span>(<span class="string">"../img/test.jpg"</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>由于我们采用url引入的图片，所以我们用url-roader</p><p>安装</p><blockquote><p>npm install url-loader –save-dev</p></blockquote><p>在<code>webpack.config.js</code>的<code>module</code>的<code>rules</code>中添加：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  test: <span class="regexp">/\.(png|jpg|gif)$/</span>,</span><br><span class="line">  use: [</span><br><span class="line">    <span class="comment">//可以一个loader写成一个对象形式，这样方便我们添加参数如options</span></span><br><span class="line">    &#123;</span><br><span class="line">      loader: <span class="string">'url-loader'</span>,</span><br><span class="line">      options: &#123;</span><br><span class="line">        <span class="comment">///当加载的图片，小于limit时，会将图片编译成base64字符串形式.limit可自行修改</span></span><br><span class="line">        <span class="comment">//当加载的图片，大于limit时，需要使用file-loader模块进行加载.npm安装就行，不需要配置</span></span><br><span class="line">        limit: <span class="number">8</span>*<span class="number">1024</span>,</span><br><span class="line"></span><br><span class="line">        <span class="comment">//问题:因为url-loader默认使用es6模块化解析，而ihtml-loader引入图片是commonjs//解析时会出问题:[object Module]</span></span><br><span class="line">        <span class="comment">//解决:关闭ur1-loader的es6模块化，使用commonjs解析</span></span><br><span class="line">        esModule: <span class="literal">false</span></span><br><span class="line"></span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">  ],</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>如果是在html文件中使用img引入的图片，我们需要添加一个loader：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    test: <span class="regexp">/\.html$ /</span>,</span><br><span class="line">    <span class="comment">//处理html文件的img图片（负责引入img，从而能被url-loader进行处理)</span></span><br><span class="line">    loader: <span class="string">'html-loader '</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>&emsp;&emsp;我们发现webpack在dist文件夹下自动帮助我们生成一个非常长的名字,这是一个32位hash值，目的是防止名字重复<br>&emsp;&emsp;但是，真实开发中，我们可能对打包的图片名字有一定的要求<br>&emsp;&emsp;比如，将所有的图片放在一个文件夹中，跟上图片原来的名称，同时也要防止重复</p><p>所以，我们可以在options中添加上如下选项:</p><ul><li>img :文件要打包到的文件夹</li><li>name:获取图片原来的名字，放在该位置</li><li>hash:8:为了防止图片名称冲突，依然使用hash，但是我们只保留8位(8可选择其他)</li><li>ext:使用图片原来的扩展名<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">options: &#123;</span><br><span class="line">  limit: <span class="number">8192</span>,</span><br><span class="line">  name:<span class="string">'images/[name].[hash:8].[ext]'</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>运行<code>npm run build</code>。现在，我们就在dist下有一个images文件夹存放着我们刚刚打包的图片了</li></ul><h2 id="ES6语法处理、js压缩-最新版浏览器可以忽略"><a href="#ES6语法处理、js压缩-最新版浏览器可以忽略" class="headerlink" title="ES6语法处理、js压缩(最新版浏览器可以忽略)"></a>ES6语法处理、js压缩(最新版浏览器可以忽略)</h2><p>&emsp;&emsp;如果你仔细阅读webpack打包的js文件，发现写的ES6语法并没有转成ES5，那么就意味着可能一些对ES6还不支持的浏览器没有办法很好的运行我们的代码。<br>&emsp;&emsp;在前面我们说过，如果希望将ES6的语法转成ES5，那么就需要使用babel.<br>&emsp;&emsp;而在webpack中，我们直接使用babel对应的loader就可以了。</p><blockquote><p>npm install -D babel-loader @babel/core @babel/preset-es2015 webpack</p></blockquote><p>配置webpack.config.js文件下的rules</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"> &#123;</span><br><span class="line">    test: <span class="regexp">/\.m?js$/</span>,</span><br><span class="line">    <span class="comment">//exclude:排除</span></span><br><span class="line">    exclude: <span class="regexp">/(node_modules|bower_components)/</span>,</span><br><span class="line">    use: &#123;</span><br><span class="line">        loader: <span class="string">'babel-loader'</span>,</span><br><span class="line">        options: &#123;</span><br><span class="line">            presets: [<span class="string">'es2015'</span>]</span><br><span class="line">      &#125;</span><br><span class="line">   &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><strong>如果需要进行js压缩，只需要把<code>mode</code>变成<code>production</code>就行了</strong>，打包时自动压缩</p><h2 id="处理其他资源"><a href="#处理其他资源" class="headerlink" title="处理其他资源"></a>处理其他资源</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//处理其他资源</span></span><br><span class="line">&#123;</span><br><span class="line">    exclude: <span class="regexp">/\.( html|js|css|less|jpg|png|gif)/</span>,</span><br><span class="line">    loader: <span class="string">'file-loader'</span>,</span><br><span class="line">    options: &#123;</span><br><span class="line">        limit: <span class="number">8192</span>,</span><br><span class="line">        name:<span class="string">'images/[name].[hash:8].[ext]'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="outputPath"><a href="#outputPath" class="headerlink" title="outputPath"></a>outputPath</h2><p>outputPath可以指定改文件打包完输出的路径，如：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    exclude: <span class="regexp">/\.( html|js|css|less|jpg|png|gif)/</span>,</span><br><span class="line">    loader: <span class="string">'file-loader'</span>,</span><br><span class="line">    options: &#123;</span><br><span class="line">        limit: <span class="number">8192</span>,</span><br><span class="line">        name:<span class="string">'images/[name].[hash:8].[ext]'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">//所有的loader都可以使用outputPath</span></span><br><span class="line">    outputPath:<span class="string">'media'</span> </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="eslint"><a href="#eslint" class="headerlink" title="eslint"></a>eslint</h2><p>eslint可以为我们进行语法检查，要这么做的话我们需要下载包</p><blockquote><p>npm install eslint-loader eslint -D<br>同时，我们想要用到eslint中的airbnb这个规则，我们还需要下载两个包<br>npm install eslint-config-airbnb-base eslint-plugin-import -D</p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//在webpack.config.json中</span></span><br><span class="line"><span class="built_in">module</span>: &#123;</span><br><span class="line">    rules:[</span><br><span class="line">        <span class="comment">//语法检查:eslint-loader  eslint</span></span><br><span class="line">        <span class="comment">//注意:只检查自己写的源代码，第三方的库是不用检查的</span></span><br><span class="line">        <span class="comment">//设置检查规则:</span></span><br><span class="line">        <span class="comment">//package.json中eslintConfig中设置</span></span><br><span class="line">        &#123;</span><br><span class="line">            test: <span class="regexp">/\.js$/</span>,</span><br><span class="line">            <span class="comment">//排除node_modules包</span></span><br><span class="line">            exclude: <span class="regexp">/node_modules/</span>,</span><br><span class="line">            <span class="comment">//优先执行</span></span><br><span class="line">            enforce:<span class="string">'pre'</span>,</span><br><span class="line">            loader: <span class="string">'eslint-loader'</span>,</span><br><span class="line">            options: &#123;</span><br><span class="line">                <span class="comment">//自动修复eslint的错误</span></span><br><span class="line">                fix:<span class="literal">true</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//在package.json中加入:</span></span><br><span class="line"><span class="string">"eslintConfig"</span> : &#123;</span><br><span class="line">    <span class="string">"extends"</span> : <span class="string">"airbnb-base"</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></div><div><div class="my_post_copyright"><script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script><script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script><script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script><p><span>本文标题:</span><a href="/MyBlog/2020/07/30/Webpack%EF%BC%88%E4%B8%80%EF%BC%89/">Webpack（一） 基本使用和loader</a></p><p><span>文章作者:</span><a href="/" title="访问 杨雨翔 的个人博客">杨雨翔</a></p><p><span>发布时间:</span>2020年07月30日 - 13:43</p><p><span>最后更新:</span>2020年10月27日 - 23:20</p><p><span>原始链接:</span><a href="/MyBlog/2020/07/30/Webpack%EF%BC%88%E4%B8%80%EF%BC%89/" title="Webpack（一） 基本使用和loader">https://gitee.com/yang_yu_xiang/MyBlog/2020/07/30/Webpack%EF%BC%88%E4%B8%80%EF%BC%89/</a> <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://gitee.com/yang_yu_xiang/MyBlog/2020/07/30/Webpack%EF%BC%88%E4%B8%80%EF%BC%89/" aria-label="复制成功！"></i></span></p><p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p></div><script>var clipboard=new Clipboard(".fa-clipboard");$(".fa-clipboard").click((function(){clipboard.on("success",(function(){swal({title:"",text:"复制成功",icon:"success",showConfirmButton:!0})}))}))</script></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-tags"><a href="/MyBlog/tags/Webpack/" rel="tag"><i class="fa fa-tag"></i> Webpack</a></div><div class="post-nav"><div class="post-nav-next post-nav-item"><a href="/MyBlog/2020/07/29/%E5%89%8D%E7%AB%AF%E6%A8%A1%E5%9D%97%E5%8C%96%E8%A7%84%E8%8C%83/" rel="next" title="前端模块化规范"><i class="fa fa-chevron-left"></i> 前端模块化规范</a></div><span class="post-nav-divider"></span><div class="post-nav-prev post-nav-item"><a href="/MyBlog/2020/07/30/Webpack%EF%BC%88%E4%BA%8C%EF%BC%89/" rel="prev" title="Webpack（二）plugin mode">Webpack（二）plugin mode <i class="fa fa-chevron-right"></i></a></div></div></footer></div></article><div class="post-spread"><div class="jiathis_style"><span class="jiathis_txt">分享到：</span> <a class="jiathis_button_fav">收藏夹</a> <a class="jiathis_button_copy">复制网址</a> <a class="jiathis_button_email">邮件</a> <a class="jiathis_button_weixin">微信</a> <a class="jiathis_button_qzone">QQ空间</a> <a class="jiathis_button_tqq">腾讯微博</a> <a class="jiathis_button_douban">豆瓣</a> <a class="jiathis_button_share">一键分享</a> <a href="http://www.jiathis.com/share?uid=2140465" class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis" target="_blank">更多</a> <a class="jiathis_counter_style"></a></div><script type="text/javascript">var jiathis_config={data_track_clickback:!0,summary:"",shortUrl:!1,hideMore:!1}</script><script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=" charset="utf-8"></script></div></div></div><div class="comments" id="comments"></div></div><div class="sidebar-toggle"><div class="sidebar-toggle-line-wrap"><span class="sidebar-toggle-line sidebar-toggle-line-first"></span> <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span> <span class="sidebar-toggle-line sidebar-toggle-line-last"></span></div></div><aside id="sidebar" class="sidebar"><div id="sidebar-dimmer"></div><div class="sidebar-inner"><ul class="sidebar-nav motion-element"><li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">文章目录</li><li class="sidebar-nav-overview" data-target="site-overview-wrap">站点概览</li></ul><section class="site-overview-wrap sidebar-panel"><div class="site-overview"><div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person"><img class="site-author-image" itemprop="image" src="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg" alt="杨雨翔"><p class="site-author-name" itemprop="name">杨雨翔</p><p class="site-description motion-element" itemprop="description"></p></div><nav class="site-state motion-element"><div class="site-state-item site-state-posts"><a href="/MyBlog/archives/"><span class="site-state-item-count">53</span> <span class="site-state-item-name">日志</span></a></div><div class="site-state-item site-state-categories"><a href="/MyBlog/categories/index.html"><span class="site-state-item-count">12</span> <span class="site-state-item-name">分类</span></a></div><div class="site-state-item site-state-tags"><a href="/MyBlog/tags/index.html"><span class="site-state-item-count">32</span> <span class="site-state-item-name">标签</span></a></div></nav><div class="links-of-author motion-element"><span class="links-of-author-item"><a href="https://gitee.com/yang_yu_xiang" target="_blank" title="码云"><i class="fa fa-fw fa-git"></i>码云</a> </span><span class="links-of-author-item"><a href="http://wpa.qq.com/msgrd?v=3&uin=1372201820&site=qq&menu=yes" target="_blank" title="QQ"><i class="fa fa-fw fa-qq"></i>QQ</a> </span><span class="links-of-author-item"><a href="https://github.com/gezhicui" target="_blank" title="Github"><i class="fa fa-fw fa-github"></i>Github</a> </span><span class="links-of-author-item"><a href="mailto:1372201820@qq.com" target="_blank" title="E-Mail"><i class="fa fa-fw fa-envelope"></i>E-Mail</a></span></div><div class="links-of-blogroll motion-element links-of-blogroll-block"><div class="links-of-blogroll-title"><i class="fa fa-fw fa-link"></i> 友情链接</div><ul class="links-of-blogroll-list"><li class="links-of-blogroll-item"><a href="https://cloudhao.top/#/search/%E5%9F%9F%E5%90%8D" title="陈昀昊的小窝" target="_blank">陈昀昊的小窝</a></li><li class="links-of-blogroll-item"><a href="http://www.shezhiwei.top/" title="佘智伟的博客" target="_blank">佘智伟的博客</a></li><li class="links-of-blogroll-item"><a href="https://blog.csdn.net/qq_43185206" title="阿呆的小鸡仔" target="_blank">阿呆的小鸡仔</a></li></ul></div></div></section><section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active"><div class="post-toc"><div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#什么是Webpack"><span class="nav-number">1.</span> <span class="nav-text">什么是Webpack</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#安装"><span class="nav-number">2.</span> <span class="nav-text">安装</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#全局安装"><span class="nav-number">2.1.</span> <span class="nav-text">全局安装</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#局部安装"><span class="nav-number">2.2.</span> <span class="nav-text">局部安装</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Webpack的配置详情"><span class="nav-number">3.</span> <span class="nav-text">Webpack的配置详情</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#entry"><span class="nav-number">3.1.</span> <span class="nav-text">entry</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#output"><span class="nav-number">3.2.</span> <span class="nav-text">output</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#module"><span class="nav-number">3.3.</span> <span class="nav-text">module</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#resolve"><span class="nav-number">3.4.</span> <span class="nav-text">resolve</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#devserver"><span class="nav-number">3.5.</span> <span class="nav-text">devserver</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#optimization"><span class="nav-number">3.6.</span> <span class="nav-text">optimization</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Webpack的使用"><span class="nav-number">4.</span> <span class="nav-text">Webpack的使用</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Webpack的配置"><span class="nav-number">5.</span> <span class="nav-text">Webpack的配置</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#package-json中自定义启动"><span class="nav-number">6.</span> <span class="nav-text">package.json中自定义启动</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#loader"><span class="nav-number">7.</span> <span class="nav-text">loader</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#webpack中使用css文件的配置"><span class="nav-number">7.1.</span> <span class="nav-text">webpack中使用css文件的配置</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#webpack中使用less文件的配置"><span class="nav-number">7.2.</span> <span class="nav-text">webpack中使用less文件的配置</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#图片文件的处理"><span class="nav-number">7.3.</span> <span class="nav-text">图片文件的处理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#ES6语法处理、js压缩-最新版浏览器可以忽略"><span class="nav-number">7.4.</span> <span class="nav-text">ES6语法处理、js压缩(最新版浏览器可以忽略)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#处理其他资源"><span class="nav-number">7.5.</span> <span class="nav-text">处理其他资源</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#outputPath"><span class="nav-number">7.6.</span> <span class="nav-text">outputPath</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#eslint"><span class="nav-number">7.7.</span> <span class="nav-text">eslint</span></a></li></ol></li></ol></div></div></section></div></aside></div></main><footer id="footer" class="footer"><div class="footer-inner"><div class="copyright">&copy; <span itemprop="copyrightYear">2021</span> <span class="with-love"><i class="fa fa-send"></i> </span><span class="author" itemprop="copyrightHolder">杨雨翔</span> <span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-area-chart"></i> </span><span class="post-meta-item-text">站点总字数&#58;</span> <span title="站点总字数">61.9k</span></div><div class="busuanzi-count"><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><span class="site-uv">本站访问数 <i class="fa fa-user"></i> <span class="busuanzi-value" id="busuanzi_value_site_uv"></span> 人次 </span><span class="site-pv">本站总访问量 <i class="fa fa-eye"></i> <span class="busuanzi-value" id="busuanzi_value_site_pv"></span> 次</span></div></div></footer><div class="back-to-top"><i class="fa fa-arrow-up"></i> <span id="scrollpercent"><span>0</span>%</span></div></div><script type="text/javascript">"[object Function]"!==Object.prototype.toString.call(window.Promise)&&(window.Promise=null)</script><script type="text/javascript" src="/MyBlog/lib/jquery/index.js?v=2.1.3"></script><script type="text/javascript" src="/MyBlog/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script><script type="text/javascript" src="/MyBlog/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script><script type="text/javascript" src="/MyBlog/lib/velocity/velocity.min.js?v=1.2.1"></script><script type="text/javascript" src="/MyBlog/lib/velocity/velocity.ui.min.js?v=1.2.1"></script><script type="text/javascript" src="/MyBlog/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script><script type="text/javascript" src="/MyBlog/js/src/utils.js?v=5.1.4"></script><script type="text/javascript" src="/MyBlog/js/src/motion.js?v=5.1.4"></script><script type="text/javascript" src="/MyBlog/js/src/affix.js?v=5.1.4"></script><script type="text/javascript" src="/MyBlog/js/src/schemes/pisces.js?v=5.1.4"></script><script type="text/javascript" src="/MyBlog/js/src/scrollspy.js?v=5.1.4"></script><script type="text/javascript" src="/MyBlog/js/src/post-details.js?v=5.1.4"></script><script type="text/javascript" src="/MyBlog/js/src/bootstrap.js?v=5.1.4"></script><script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script><script src="//unpkg.com/valine/dist/Valine.min.js"></script><script type="text/javascript">var GUEST=["nick","mail","link"],guest="nick";guest=guest.split(",").filter(e=>GUEST.indexOf(e)>-1),new Valine({el:"#comments",verify:!1,notify:!1,appId:"i5Tl5zN4f4LxoJgipanUuaml-gzGzoHsz",appKey:"wqw6uYNCQkeVxBffKebM29NH",placeholder:"说点什么吧...",avatar:"mm",guest_info:guest,pageSize:"10"})</script><script type="text/javascript">var isfetched=!1,isXml=!0,search_path="search.xml";0===search_path.length?search_path="search.xml":/json$/i.test(search_path)&&(isXml=!1);var path="/MyBlog/"+search_path,onPopupClose=function(t){$(".popup").hide(),$("#local-search-input").val(""),$(".search-result-list").remove(),$("#no-result").remove(),$(".local-search-pop-overlay").remove(),$("body").css("overflow","")};function proceedsearch(){$("body").append('<div class="search-popup-overlay local-search-pop-overlay"></div>').css("overflow","hidden"),$(".search-popup-overlay").click(onPopupClose),$(".popup").toggle();var t=$("#local-search-input");t.attr("autocapitalize","none"),t.attr("autocorrect","off"),t.focus()}var searchFunc=function(t,e,o){"use strict";$("body").append('<div class="search-popup-overlay local-search-pop-overlay"><div id="search-loading-icon"><i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i></div></div>').css("overflow","hidden"),$("#search-loading-icon").css("margin","20% auto 0 auto").css("text-align","center"),$.ajax({url:t,dataType:isXml?"xml":"json",async:!0,success:function(t){isfetched=!0,$(".popup").detach().appendTo(".header-inner");var n=isXml?$("entry",t).map((function(){return{title:$("title",this).text(),content:$("content",this).text(),url:$("url",this).text()}})).get():t,r=document.getElementById(e),s=document.getElementById(o),a=function(){var t=r.value.trim().toLowerCase(),e=t.split(/[\s\-]+/);e.length>1&&e.push(t);var o=[];if(t.length>0&&n.forEach((function(n){var r=!1,s=0,a=0,i=n.title.trim(),c=i.toLowerCase(),l=n.content.trim().replace(/<[^>]+>/g,""),h=l.toLowerCase(),p=decodeURIComponent(n.url),u=[],f=[];if(""!=i&&(e.forEach((function(t){function e(t,e,o){var n=t.length;if(0===n)return[];var r=0,s=[],a=[];for(o||(e=e.toLowerCase(),t=t.toLowerCase());(s=e.indexOf(t,r))>-1;)a.push({position:s,word:t}),r=s+n;return a}u=u.concat(e(t,c,!1)),f=f.concat(e(t,h,!1))})),(u.length>0||f.length>0)&&(r=!0,s=u.length+f.length)),r){function d(e,o,n,r){for(var s=r[r.length-1],i=s.position,c=s.word,l=[],h=0;i+c.length<=n&&0!=r.length;){c===t&&h++,l.push({position:i,length:c.length});var p=i+c.length;for(r.pop();0!=r.length&&(i=(s=r[r.length-1]).position,c=s.word,p>i);)r.pop()}return a+=h,{hits:l,start:o,end:n,searchTextCount:h}}[u,f].forEach((function(t){t.sort((function(t,e){return e.position!==t.position?e.position-t.position:t.word.length-e.word.length}))}));var g=[];0!=u.length&&g.push(d(0,0,i.length,u));for(var v=[];0!=f.length;){var $=f[f.length-1],C=$.position,m=$.word,x=C-20,w=C+80;x<0&&(x=0),w<C+m.length&&(w=C+m.length),w>l.length&&(w=l.length),v.push(d(0,x,w,f))}v.sort((function(t,e){return t.searchTextCount!==e.searchTextCount?e.searchTextCount-t.searchTextCount:t.hits.length!==e.hits.length?e.hits.length-t.hits.length:t.start-e.start}));var y=parseInt("1");function T(t,e){var o="",n=e.start;return e.hits.forEach((function(e){o+=t.substring(n,e.position);var r=e.position+e.length;o+='<b class="search-keyword">'+t.substring(e.position,r)+"</b>",n=r})),o+=t.substring(n,e.end)}y>=0&&(v=v.slice(0,y));var b="";0!=g.length?b+="<li><a href='"+p+"' class='search-result-title'>"+T(i,g[0])+"</a>":b+="<li><a href='"+p+"' class='search-result-title'>"+i+"</a>",v.forEach((function(t){b+="<a href='"+p+'\'><p class="search-result">'+T(l,t)+"...</p></a>"})),b+="</li>",o.push({item:b,searchTextCount:a,hitCount:s,id:o.length})}})),1===e.length&&""===e[0])s.innerHTML='<div id="no-result"><i class="fa fa-search fa-5x" /></div>';else if(0===o.length)s.innerHTML='<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>';else{o.sort((function(t,e){return t.searchTextCount!==e.searchTextCount?e.searchTextCount-t.searchTextCount:t.hitCount!==e.hitCount?e.hitCount-t.hitCount:e.id-t.id}));var a='<ul class="search-result-list">';o.forEach((function(t){a+=t.item})),a+="</ul>",s.innerHTML=a}};r.addEventListener("input",a),$(".local-search-pop-overlay").remove(),$("body").css("overflow",""),proceedsearch()}})};$(".popup-trigger").click((function(t){t.stopPropagation(),!1===isfetched?searchFunc(path,"local-search-input","local-search-result"):proceedsearch()})),$(".popup-btn-close").click(onPopupClose),$(".popup").click((function(t){t.stopPropagation()})),$(document).on("keyup",(function(t){27===t.which&&$(".search-popup").is(":visible")&&onPopupClose()}))</script><script src="/MyBlog/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"model":{"jsonPath":"/MyBlog/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":false},"log":false});</script></body></html>